Dark-mode and contrast fixes, Classic mode deprecation notice, Insights tile padding

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

@@ -6148,8 +6148,6 @@
         "playwright/e2e/Features/StorageMetadataAgentForm.spec.ts",
         "playwright/e2e/Features/Table.spec.ts",
         "playwright/e2e/Features/TierWidget.spec.ts",
-        "playwright/e2e/Pages/DataContracts.spec.ts",
-        "playwright/e2e/Pages/DataContractsSemanticRules.spec.ts",
         "playwright/e2e/Pages/ExplorePageRightPanel_KnowledgeCenter.spec.ts",
         "playwright/e2e/Pages/TableCreationTime.spec.ts"
       ]
@@ -6218,6 +6216,15 @@
         "playwright/e2e/Pages/ODCSImportExportPermissions.spec.ts"
       ]
     },
+    {
+      "sources": [
+        "openmetadata-ui/src/main/resources/ui/src/components/DataContract/ContractLatestResultBadge/ContractLatestResultBadge.tsx"
+      ],
+      "specs": [
+        "playwright/e2e/Pages/DataContracts.spec.ts",
+        "playwright/e2e/Pages/DataContractsSemanticRules.spec.ts"
+      ]
+    },
     {
       "sources": [
         "openmetadata-ui/src/main/resources/ui/src/components/DataContract/ContractQualityFormTab/ContractQualityFormTab.tsx"
@@ -6405,8 +6412,6 @@
       ],
       "specs": [
         "playwright/e2e/Features/DataAssetRulesEnabled.spec.ts",
-        "playwright/e2e/Pages/DataContracts.spec.ts",
-        "playwright/e2e/Pages/DataContractsSemanticRules.spec.ts",
         "playwright/e2e/Pages/DataProductAndSubdomains.spec.ts",
         "playwright/e2e/Pages/DomainAdvanced.spec.ts"
       ]

docs/decisions/2026-10-16-classic-mode-is-deprecated.md

@@ -0,0 +1,35 @@
+# Classic mode is deprecated; the UI says so only where the mode is chosen
+
+- **Status:** Accepted
+- **Revisions:** v1 2026-10-16 (initial)
+- **Deciders:** Pere Miquel Brull (product), Chirag Madlani (UI), Reethika (design)
+- **Guard:** `AppModeSwitcher.test.tsx`, `InterfaceModeMenuItem.test.tsx`,
+  `DefaultAppModePage.test.tsx` (Deprecated badge and notice on the Classic option only)
+- **Related:** open-metadata/openmetadata-collate#7533, #35609,
+  ADR:2026-10-12-dark-mode-targets-ai-mode-core-surfaces-only
+
+## Context
+AI mode is the go-forward interface, and Classic mode will be removed. Users and admins need
+to hear that before it happens. Product asked that the product itself not be invasive about
+it: the main channel is the release notes, and the UI should not nag every user on every page.
+
+## Decision
+- Classic mode is deprecated as of 2026-10. It stays fully supported until the release that
+  removes it, which the release notes will name.
+- The UI marks Classic as *Deprecated* (core warning `Badge`), with a short notice and a link
+  to the release notes, only where the mode is chosen:
+  - the AI-shell mode switcher and the classic profile dropdown, on the Classic option once the
+    menu is open (a `HoverCard` on hover or keyboard focus). It is never on the always-visible
+    switcher trigger;
+  - the admin *Default App Mode* setting, as a hint under the Classic radio.
+- The shipped copy promises the following, and the removal release must honour it: an
+  organization `defaultAppMode` or persona app mode still set to Classic is moved to AI, and a
+  user switching from Classic to AI keeps their settings.
+
+## Consequences
+New surfaces that offer a Classic/AI choice add the same badge and notice; nothing else
+mentions the deprecation. The removal release owns the migration of Classic values to AI. If
+product drops that migration, change the copy (`message.classic-mode-retiring-*`) in the same
+release and amend this record. ADR:2026-10-12-dark-mode-targets-ai-mode-core-surfaces-only
+already scopes dark mode to AI mode; once Classic is removed, its Classic carve-out no longer
+applies.

docs/decisions/2026-10-16-light-featured-icons-stay-tinted-in-dark.md

@@ -0,0 +1,26 @@
+# Light featured icons stay tinted in dark mode
+
+- **Status:** Accepted
+- **Revisions:** v1 2026-10-16 (initial)
+- **Deciders:** UI team, design
+- **Guard:** `reviewer` for `featured-icon.tsx`
+- **Related:** open-metadata/openmetadata-collate#7533, ADR:2026-10-12-dark-mode-targets-ai-mode-core-surfaces-only
+
+## Context
+`FeaturedIcon` with `theme="light"` switched to a solid fill (`bg-*-solid`, white glyph) under
+`.dark-mode`, inherited from the UntitledUI port (#29412). The AI-mode Home topic cards draw a
+tinted tile instead (`bg-utility-<c>-50` + `text-utility-<c>-600`), so AI Automations and other
+pages read as heavier, louder blocks next to Home, and callers patched it locally
+(`CriticalAnnouncementBanner`, `StatCard`, Collate `agentIconMap`).
+
+## Decision
+- `FeaturedIcon` `theme="light"` keeps a tinted tile in dark: `tw:dark:bg-utility-<c>-50
+  tw:dark:text-utility-<c>-600`. Light mode is unchanged.
+- Domain and data product avatars (`getEntityAvatarProps`) are out of scope: users pick their
+  color, so they stay a solid fill in both themes until custom colors are revisited.
+
+## Consequences
+Tinted icon tiles come from the core component, so callers stop overriding colors to match Home.
+A page that wants a solid tile in dark must pick a solid theme (`dark`, `modern`) rather than
+`light`. Revisit only if design moves Home itself back to solid tiles, or when entity custom
+colors are reworked.

openmetadata-ui-core-components/src/main/resources/ui/src/components/application/hover-card/hover-card.test.tsx

@@ -89,6 +89,24 @@ describe('HoverCard', () => {
     expect(screen.queryByText('Profile')).toBeNull();
   });
 
+  it('stays open while keyboard focus moves from the trigger into the card', () => {
+    renderCard({ openDelay: 0, closeDelay: 200 });
+
+    fireEvent.keyDown(document.body, { key: 'Tab' });
+    act(() => screen.getByText('Jane').focus());
+    advance(0);
+
+    act(() => screen.getByText('Profile').focus());
+    advance(500);
+
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+
+    act(() => screen.getByText('Profile').blur());
+    advance(500);
+
+    expect(screen.queryByText('Profile')).toBeNull();
+  });
+
   it('never opens when disabled', () => {
     renderCard({ isDisabled: true, openDelay: 0 });
 

openmetadata-ui-core-components/src/main/resources/ui/src/components/application/hover-card/hover-card.tsx

@@ -92,6 +92,12 @@ export const HoverCard = ({
     onHoverStart: () => schedule(true),
     onHoverEnd: () => schedule(false),
   });
+  // Focus moving from the trigger into the card (e.g. to a link inside it) must
+  // keep the card open; otherwise the trigger's blur closes it under the user.
+  const { focusWithinProps: cardFocusWithinProps } = useFocusWithin({
+    isDisabled,
+    onFocusWithinChange: (isFocused) => schedule(isFocused),
+  });
   // Only keyboard focus opens the card; a mouse click that focuses the trigger
   // is already covered by hover.
   const { focusWithinProps } = useFocusWithin({
@@ -121,7 +127,7 @@ export const HoverCard = ({
         triggerRef={triggerRef}
         onOpenChange={setIsOpen}>
         <div
-          {...cardHoverProps}
+          {...mergeProps(cardHoverProps, cardFocusWithinProps)}
           className={cx(
             'tw:rounded-xl tw:bg-overlay-surface tw:p-4 tw:shadow-lg tw:outline-1 tw:outline-secondary_alt',
             className

openmetadata-ui-core-components/src/main/resources/ui/src/components/application/table/table.tsx

@@ -297,6 +297,9 @@ const TableHeader = <T extends object>({
           // Row border—using an "after" pseudo-element to avoid the border taking up space.
           bordered &&
             'tw:[&>tr>th]:after:pointer-events-none tw:[&>tr>th]:after:absolute tw:[&>tr>th]:after:inset-x-0 tw:[&>tr>th]:after:bottom-0 tw:[&>tr>th]:after:h-px tw:[&>tr>th]:after:bg-border-secondary tw:[&>tr>th]:focus-visible:after:bg-transparent',
+          // Dark: the 8% white divider resolves to the body-row surface under the darker
+          // header band, so the edge vanishes; border-primary keeps it visible.
+          bordered && 'tw:dark:[&>tr>th]:after:bg-border-primary',
 
           typeof className === 'function' ? className(state) : className
         )

openmetadata-ui-core-components/src/main/resources/ui/src/components/base/badges/badges.test.tsx

@@ -108,4 +108,18 @@ describe('BadgeWithButton tooltip', () => {
 
     expect(screen.getAllByRole('button')).toHaveLength(1);
   });
+
+  it('keeps its own text color when rendered as a link', () => {
+    render(
+      <Badge color="error" data-testid="linked-badge" href="/somewhere">
+        Failed
+      </Badge>
+    );
+
+    const badge = screen.getByTestId('linked-badge');
+
+    expect(badge.tagName).toBe('A');
+    expect(badge).toHaveClass('tw:text-utility-error-700', 'tw:no-underline');
+    expect(badge).not.toHaveClass('tw:text-inherit');
+  });
 });

openmetadata-ui-core-components/src/main/resources/ui/src/components/base/badges/badges.tsx

@@ -229,10 +229,10 @@ export const Badge = <T extends BadgeTypes>(props: BadgeProps<T>) => {
         sizes[type][size],
         colors.styles[color].root,
         bordered && 'tw:outline-1 tw:-outline-offset-1',
-        // A linked badge must look identical to a non-linked one — no
-        // browser default underline/link color, and it must inherit the
-        // badge's own text color rather than react-aria-components' link styles.
-        href && 'tw:text-inherit tw:no-underline',
+        // A linked badge must look identical to a non-linked one: no underline,
+        // and the color root's text class sets its color. `tw:text-inherit` here
+        // would win the tailwind-merge conflict and drop that color.
+        href && 'tw:no-underline',
         className
       )}
       data-testid={dataTestId}

openmetadata-ui-core-components/src/main/resources/ui/src/components/foundations/featured-icon/featured-icon.tsx

@@ -29,8 +29,9 @@ const outlineBorders: Record<FeaturedIconColor, string> = {
 };
 
 const styles = sortCx({
+  // Dark: tinted tile (the home topic-card look), not a solid fill.
   light: {
-    base: 'tw:rounded-full tw:dark:text-fg-white',
+    base: 'tw:rounded-full',
     sizes: {
       sm: 'tw:size-8',
       md: 'tw:size-10',
@@ -39,14 +40,14 @@ const styles = sortCx({
     },
     colors: {
       brand:
-        'tw:bg-brand-secondary tw:text-featured-icon-light-fg-brand tw:dark:bg-brand-solid',
+        'tw:bg-brand-secondary tw:text-featured-icon-light-fg-brand tw:dark:bg-utility-brand-50 tw:dark:text-utility-brand-600',
       error:
-        'tw:bg-error-secondary tw:text-featured-icon-light-fg-error tw:dark:bg-error-solid',
-      gray: 'tw:bg-tertiary tw:text-featured-icon-light-fg-gray tw:dark:bg-secondary-solid',
+        'tw:bg-error-secondary tw:text-featured-icon-light-fg-error tw:dark:bg-utility-error-50 tw:dark:text-utility-error-600',
+      gray: 'tw:bg-tertiary tw:text-featured-icon-light-fg-gray tw:dark:bg-utility-gray-50 tw:dark:text-utility-gray-600',
       success:
-        'tw:bg-success-secondary tw:text-featured-icon-light-fg-success tw:dark:bg-success-solid',
+        'tw:bg-success-secondary tw:text-featured-icon-light-fg-success tw:dark:bg-utility-success-50 tw:dark:text-utility-success-600',
       warning:
-        'tw:bg-warning-secondary tw:text-featured-icon-light-fg-warning tw:dark:bg-warning-solid',
+        'tw:bg-warning-secondary tw:text-featured-icon-light-fg-warning tw:dark:bg-utility-warning-50 tw:dark:text-utility-warning-600',
     },
   },
 

openmetadata-ui/src/main/resources/ui/src/components/AppModeSwitcher/AppModeSwitcher.test.tsx

@@ -59,6 +59,16 @@ jest.mock('react-i18next', () => ({
 }));
 
 jest.mock('@openmetadata/ui-core-components', () => ({
+  Badge: ({
+    children,
+    ...props
+  }: React.PropsWithChildren<Record<string, unknown>>) =>
+    React.createElement('span', props, children),
+  HoverCard: ({
+    children,
+    content,
+  }: React.PropsWithChildren<{ content: React.ReactNode }>) =>
+    React.createElement(React.Fragment, null, children, content),
   Box: ({
     children,
     ...props
@@ -100,6 +110,7 @@ jest.mock('../../hooks/currentUserStore/useCurrentUserStore', () => ({
 jest.mock('../../constants/appMode.constants', () => ({
   AI_APP_MODE: 'ai',
   DEFAULT_APP_MODE: 'default',
+  CLASSIC_MODE_RELEASE_NOTES_URL: 'https://docs.example/releases',
 }));
 
 const getTrigger = () => screen.getByTestId('app-mode-switcher-trigger');
@@ -220,4 +231,22 @@ describe('AppModeSwitcher', () => {
     expect(container).not.toBeEmptyDOMElement();
     expect(getTrigger()).toBeInTheDocument();
   });
+
+  it('marks Classic as deprecated inside the switcher only', () => {
+    render(<AppModeSwitcher />);
+
+    expect(
+      screen.queryByTestId('classic-deprecated-badge')
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(getTrigger());
+
+    expect(screen.getByTestId('classic-deprecated-badge')).toHaveTextContent(
+      'label.deprecated'
+    );
+    expect(screen.getByTestId('classic-deprecation-card')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('classic-deprecation-release-notes')
+    ).toHaveAttribute('href', 'https://docs.example/releases');
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/AppModeSwitcher/AppModeSwitcher.tsx

@@ -11,7 +11,13 @@
  *  limitations under the License.
  */
 
-import { Box, Popover, Typography } from '@openmetadata/ui-core-components';
+import {
+  Badge,
+  Box,
+  HoverCard,
+  Popover,
+  Typography,
+} from '@openmetadata/ui-core-components';
 import { Check, ChevronUp } from '@openmetadata/ui-core-components/icons';
 import classNames from 'classnames';
 import React, { useRef, useState } from 'react';
@@ -30,6 +36,7 @@
   useIsAiMode,
   writeAppMode,
 } from '../../hooks/useAppMode';
+import { ClassicDeprecationCard } from './ClassicDeprecationNotice';
 
 const OPTION_ICON_BOX =
   'tw:w-9 tw:h-9 tw:rounded-[10px] tw:bg-utility-blue-50 tw:border tw:border-utility-blue-100 tw:shrink-0';
@@ -183,35 +190,45 @@
             {t('label.switch-interface')}
           </p>
 
-          <button
-            className={classNames(
-              'tw:flex tw:items-center tw:gap-2.5 tw:w-full tw:p-2.5 tw:rounded-xl tw:cursor-pointer tw:transition tw:bg-surface tw:border tw:text-left',
-              {
-                'tw:bg-utility-blue-50 tw:border-utility-blue-200': !isAiMode,
-                'tw:border-transparent tw:hover:bg-utility-blue-50': isAiMode,
-              }
-            )}
-            data-testid="app-mode-option-classic"
-            type="button"
-            onClick={handleClassicClick}>
-            <Box align="center" className={OPTION_ICON_BOX} justify="center">
-              <AppModeClassicIcon height={23} width={23} />
-            </Box>
-            <Box className="tw:flex-1 tw:min-w-0" direction="col">
-              <Typography
-                className="tw:text-primary"
-                size="text-sm"
-                weight="semibold">
-                {t('label.classic')}
-              </Typography>
-            </Box>
-            {!isAiMode && (
-              <span className={BADGE_CLASS} data-testid="classic-current-badge">
-                <Check height={12} width={12} />
-                {t('label.current')}
-              </span>
-            )}
-          </button>
+          <HoverCard content={<ClassicDeprecationCard />} placement="right">
+            <button
+              className={classNames(
+                'tw:flex tw:items-center tw:gap-2.5 tw:w-full tw:p-2.5 tw:rounded-xl tw:cursor-pointer tw:transition tw:bg-surface tw:border tw:text-left',
+                {
+                  'tw:bg-utility-blue-50 tw:border-utility-blue-200': !isAiMode,
+                  'tw:border-transparent tw:hover:bg-utility-blue-50': isAiMode,
+                }
+              )}
+              data-testid="app-mode-option-classic"
+              type="button"
+              onClick={handleClassicClick}>
+              <Box align="center" className={OPTION_ICON_BOX} justify="center">
+                <AppModeClassicIcon height={23} width={23} />
+              </Box>
+              <Box align="center" className="tw:flex-1 tw:min-w-0" gap={2}>
+                <Typography
+                  className="tw:text-primary"
+                  size="text-sm"
+                  weight="semibold">
+                  {t('label.classic')}
+                </Typography>
+                <Badge
+                  color="warning"
+                  data-testid="classic-deprecated-badge"
+                  size="sm">
+                  {t('label.deprecated')}
+                </Badge>
+              </Box>
+              {!isAiMode && (
+                <span
+                  className={BADGE_CLASS}
+                  data-testid="classic-current-badge">
+                  <Check height={12} width={12} />
+                  {t('label.current')}
+                </span>
+              )}
+            </button>
+          </HoverCard>
 
           <button
             className={classNames(
@@ -256,7 +273,7 @@
               className={classNames(
                 'tw:w-5 tw:h-5 tw:rounded-md tw:shrink-0 tw:transition',
                 {
                   'tw:bg-blue-600 tw:border-0': isRemembered,
                   'tw:bg-surface tw:border tw:border-utility-gray-400':
                     !isRemembered,
                 }