Fixes #34976: Align dark-theme surfaces and controls across shared UI

.github/playwright/impact-map.generated.json

@@ -7611,14 +7611,6 @@
         "playwright/e2e/Pages/AppStopRunModal.spec.ts"
       ]
     },
-    {
-      "sources": [
-        "openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx"
-      ],
-      "specs": [
-        "playwright/e2e/Pages/DomainUIInteractions.spec.ts"
-      ]
-    },
     {
       "sources": [
         "openmetadata-ui/src/main/resources/ui/src/components/Modals/TourEndModal/TourEndModal.tsx"
@@ -12448,6 +12440,22 @@
         "playwright/e2e/Pages/IntakeForm.spec.ts"
       ]
     },
+    {
+      "sources": [
+        "openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx"
+      ],
+      "specs": [
+        "playwright/e2e/Features/DataQuality/ProfilerSettingsAfterReindex.spec.ts"
+      ]
+    },
+    {
+      "sources": [
+        "openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx"
+      ],
+      "specs": [
+        "playwright/e2e/Features/DataQuality/ProfilerSettingsAfterReindex.spec.ts"
+      ]
+    },
     {
       "sources": [
         "openmetadata-ui/src/main/resources/ui/src/pages/KnowledgeCenterFilterPage/KnowledgeCenterFilterPage.tsx"

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/DataQuality/ProfilerSettingsAfterReindex.spec.ts

@@ -48,6 +48,23 @@ test('Profiler settings survive a table reindex', async ({ browser }) => {
     await page.getByTestId('profiler-setting-btn').click();
     await page.getByTestId('profiler-settings-modal').waitFor();
 
+    // Body-portaled options are hidden by the modal's accessibility boundary.
+    // Check accessible options and keyboard selection inside the drawer.
+    const settings = page.getByRole('dialog', { name: 'Settings' });
+    const sampleType = settings.getByRole('combobox', {
+      name: 'Profile Sample type',
+    });
+    await settings.getByTestId('profile-sample').click();
+    await expect(
+      settings.getByRole('option', { name: 'Row Count', exact: true })
+    ).toBeAttached();
+    await sampleType.press('ArrowDown');
+    await sampleType.press('Enter');
+    await expect(settings.getByTestId('metric-number-input')).toBeVisible();
+    await settings.getByTestId('profile-sample').click();
+    await sampleType.press('ArrowUp');
+    await sampleType.press('Enter');
+
     await page.getByTestId('slider-input').clear();
     await page.getByTestId('slider-input').fill(PROFILE_SAMPLE);
     await page.getByTestId('sample-data-count-input').clear();

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskCreation.spec.ts

@@ -175,7 +175,15 @@ test.describe('Task Creation - Request Description', () => {
     await expect(page.getByTestId('form-container')).toBeVisible();
 
     // Assignee field - search and select user
-    const assigneeInput = page.locator('[data-testid="select-assignee"] input');
+    const assigneeInput = page
+      .getByTestId('select-assignee')
+      .getByRole('combobox');
+    await expect(assigneeInput).toHaveAccessibleName(/^Assignees\b/);
+    await page
+      .locator('label')
+      .filter({ hasText: /^Assignees\b/ })
+      .click();
+    await expect(assigneeInput).toBeFocused();
     await assigneeInput.click();
 
     // Search for user

openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts

@@ -1292,10 +1292,12 @@ export const createDescriptionTaskForGlossary = async (
     );
 
     await expect(
-      page.locator('[data-testid="select-assignee"] input')
+      page.getByTestId('select-assignee').getByRole('combobox')
     ).toBeDisabled();
   } else {
-    const assigneeField = page.locator('[data-testid="select-assignee"] input');
+    const assigneeField = page
+      .getByTestId('select-assignee')
+      .getByRole('combobox');
     await assigneeField.click();
 
     const userSearchResponse = page.waitForResponse(
@@ -1342,11 +1344,13 @@ export const createTagTaskForGlossary = async (
     );
 
     await expect(
-      page.locator('[data-testid="select-assignee"] input')
+      page.getByTestId('select-assignee').getByRole('combobox')
     ).toBeDisabled();
   } else {
     // select assignee
-    const assigneeField = page.locator('[data-testid="select-assignee"] input');
+    const assigneeField = page
+      .getByTestId('select-assignee')
+      .getByRole('combobox');
     await assigneeField.click();
     const userSearchResponse = page.waitForResponse(
       `/api/v1/search/query?q=*${value.assignee}**&index=user%2Cteam*`

openmetadata-ui/src/main/resources/ui/playwright/utils/incidentManager.ts

@@ -189,7 +189,7 @@ export const addAssigneeFromPopoverWidget = async (data: {
 
     const assigneeModal = page.locator('.ant-modal-content').last();
     const assigneeSelect = assigneeModal.getByTestId('select-assignee');
-    const assigneeInput = assigneeSelect.locator('input');
+    const assigneeInput = assigneeSelect.getByRole('combobox');
     const assigneeOption = page.getByTestId(user.name).first();
     const normalizedAssigneeOption = page
       .getByTestId(user.name.toLowerCase())

openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts

@@ -122,10 +122,12 @@ export const createDescriptionTask = async (
     );
 
     await expect(
-      page.locator('[data-testid="select-assignee"] input')
+      page.getByTestId('select-assignee').getByRole('combobox')
     ).toBeDisabled();
   } else {
-    const assigneeField = page.locator('[data-testid="select-assignee"] input');
+    const assigneeField = page
+      .getByTestId('select-assignee')
+      .getByRole('combobox');
     await assigneeField.click();
     await assigneeField.fill(value.assignee);
 
@@ -163,11 +165,13 @@ export const createTagTask = async (
     );
 
     await expect(
-      page.locator('[data-testid="select-assignee"] input')
+      page.getByTestId('select-assignee').getByRole('combobox')
     ).toBeDisabled();
   } else {
     // select assignee
-    const assigneeField = page.locator('[data-testid="select-assignee"] input');
+    const assigneeField = page
+      .getByTestId('select-assignee')
+      .getByRole('combobox');
     await assigneeField.click();
     await assigneeField.fill(value.assignee);
 

openmetadata-ui/src/main/resources/ui/playwright/utils/taskWorkflow.ts

@@ -214,7 +214,9 @@ export const openTaskForm = async (page: Page, route: string) => {
 };
 
 export const selectAssignee = async (page: Page, assigneeName: string) => {
-  const assigneeInput = page.locator('[data-testid="select-assignee"] input');
+  const assigneeInput = page
+    .getByTestId('select-assignee')
+    .getByRole('combobox');
   const assigneeOption = page.getByTestId(assigneeName);
   const assigneeSearchResponse = page
     .waitForResponse(

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/feed-panel-body-v1.less

@@ -15,17 +15,18 @@
 
 .activity-feed-card-new {
   border-radius: var(--om-radius-xl);
-  background: @grey-9;
+  background: var(--tw-color-bg-surface);
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   width: inherit;
 
   &.ant-card {
-    background: @grey-9;
+    background: var(--tw-color-bg-surface);
     border-radius: var(--om-radius-xl);
     margin-bottom: var(--om-space-20);
-    border: 0.5px solid @grey-15;
+    border: 1px solid var(--tw-color-border-subtle);
+    box-shadow: var(--om-shadow-card);
   }
 
   .ant-card-body {
@@ -66,7 +67,7 @@
 .task-feed-card-v1-new {
   .header-link {
     word-wrap: break-word;
-    color: @primary-heading-color;
+    color: var(--tw-color-text-link);
     font-weight: var(--om-font-weight-semibold);
     display: inline;
   }
@@ -84,8 +85,8 @@
   border-radius: var(--om-radius-xl);
   padding: var(--om-space-16);
   margin: var(--om-space-20) 0 0 0;
-  background: @grey-9;
-  border: 0.5px solid @grey-15;
+  background: var(--tw-color-bg-surface);
+  border: 1px solid var(--tw-color-border-subtle);
   input.ant-input,
   textarea.ant-input {
     border-radius: var(--om-radius-20);
@@ -102,8 +103,8 @@
 
 .activity-feed-reply-button {
   border-radius: var(--om-radius-3xl);
-  border: 1px solid var(--om-legacy-color-d4d4d8);
-  color: var(--om-legacy-color-52525b);
+  border: 1px solid var(--tw-color-border-secondary);
+  color: var(--tw-color-text-secondary);
   font-size: var(--om-font-size-xs);
 }
 .comments-input-field {

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab.less

@@ -226,10 +226,10 @@
 
     &,
     & a {
-      color: @primary-heading-color;
+      color: var(--tw-color-text-link);
 
       &:hover {
-        color: @primary-heading-color;
+        color: var(--tw-color-text-link);
       }
     }
   }
@@ -244,33 +244,36 @@
 }
 
 .activity-feed-editor-container-new {
-  background-color: @grey-9;
-  border: 0.5px solid @grey-15;
+  background-color: var(--tw-color-bg-surface);
+  border: 1px solid var(--tw-color-border-subtle);
   border-radius: var(--om-radius-10);
   width: 100%;
 
   .ql-container {
-    background-color: @grey-9;
-    border: 1px solid @grey-15;
+    background-color: var(--tw-color-bg-surface);
+    border: none;
     width: 100%;
 
     &:focus-within {
-      border: 0.5px solid @grey-15;
+      outline: 1px solid var(--tw-color-border-brand);
+      outline-offset: -1px;
     }
   }
 
   .ql-toolbar {
-    background-color: @grey-9;
-    border: 1px solid @grey-15;
+    background-color: var(--tw-color-bg-surface);
+    border: none;
+    border-bottom: 1px solid var(--tw-color-border-subtle);
     flex-wrap: wrap;
 
     &:focus-within {
-      border: 0.5px solid @grey-15;
+      outline: 1px solid var(--tw-color-border-brand);
+      outline-offset: -1px;
     }
   }
 
   .ql-toolbar button {
-    color: var(--om-color-gray-true-800);
+    color: var(--tw-color-text-secondary);
   }
 }
 

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedEditor/feed-editor.less

@@ -506,19 +506,19 @@
 @media (pointer: coarse) {
   .ql-snow.ql-toolbar button:hover:not(.ql-active),
   .ql-snow .ql-toolbar button:hover:not(.ql-active) {
-    color: var(--om-legacy-color-444444);
+    color: var(--tw-color-text-secondary);
   }
   .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
   .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
   .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
   .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
-    fill: var(--om-legacy-color-444444);
+    fill: var(--tw-color-text-secondary);
   }
   .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
   .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
   .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
   .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
-    stroke: var(--om-legacy-color-444444);
+    stroke: var(--tw-color-text-secondary);
   }
 }
 .ql-snow {
@@ -556,20 +556,20 @@
 }
 .ql-snow .ql-stroke {
   fill: none;
-  stroke: var(--om-legacy-color-444444);
+  stroke: var(--tw-color-text-secondary);
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 2;
 }
 .ql-snow .ql-stroke-miter {
   fill: none;
-  stroke: var(--om-legacy-color-444444);
+  stroke: var(--tw-color-text-secondary);
   stroke-miterlimit: 10;
   stroke-width: 2;
 }
 .ql-snow .ql-fill,
 .ql-snow .ql-stroke.ql-fill {
-  fill: var(--om-legacy-color-444444);
+  fill: var(--tw-color-text-secondary);
 }
 .ql-snow .ql-empty {
   fill: none;
@@ -643,7 +643,7 @@
   max-width: 100%;
 }
 .ql-snow .ql-picker {
-  color: var(--om-legacy-color-444444);
+  color: var(--tw-color-text-secondary);
   display: inline-block;
   font-size: var(--om-font-size-sm);
   font-weight: var(--om-font-weight-medium);