Skip to content

Feat/UI/dark mode semantic tokens#16240

Open
annadoesdesign wants to merge 13 commits intomasterfrom
feat/ui/dark-mode-semantic-tokens
Open

Feat/UI/dark mode semantic tokens#16240
annadoesdesign wants to merge 13 commits intomasterfrom
feat/ui/dark-mode-semantic-tokens

Conversation

@annadoesdesign
Copy link
Contributor

No description provided.

Anna Everhart and others added 2 commits February 17, 2026 12:21
Migrate 1,000+ frontend files from legacy color constants (REDESIGN_COLORS,
ANTD_GRAY, hardcoded hex values, alchemy colors.X[] palette) to semantic
theme tokens (theme.colors.*) from the styled-components ThemeProvider.

This builds on the theming infrastructure from PR #14787 and enables
light/dark mode support across the entire UI.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
@github-actions github-actions bot added the product PR or Issue related to the DataHub UI/UX label Feb 17, 2026
@datahub-cyborg datahub-cyborg bot added the needs-review Label for PRs that need review from a maintainer. label Feb 17, 2026
@alwaysmeticulous
Copy link

alwaysmeticulous bot commented Feb 17, 2026

🔴 Meticulous spotted visual differences in 718 of 1321 screens tested: view and approve differences detected.

Meticulous evaluated ~9 hours of user flows against your PR.

Last updated for commit 0abee2b. This comment will update as new commits are pushed.

Remove unused `colors` imports, merge duplicate styled-components
imports, fix missing useCallback dependencies, and move styled
component out of render body.

Co-authored-by: Cursor <cursoragent@cursor.com>
@codecov
Copy link

codecov bot commented Feb 17, 2026

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
335 1 334 0
View the top 2 failed test(s) by shortest run time
uploadFiles cypress/e2e/uploadFiles/uploadFiles.js::cypress/e2e/uploadFiles/uploadFiles.js
Stack Traces | 12.5s run time
2026-02-19T19:54:30.501Z
Timed out retrying after 10000ms: Expected to find element: `.ant-notification`, but never found it.
tests.cypress.integration_test::test_run_cypress
Stack Traces | 200s run time
auth_session = <tests.utils.TestSessionWrapper object at 0x7f139537f110>

    def test_run_cypress(auth_session):
        # Run with --record option only if CYPRESS_RECORD_KEY is non-empty
        record_key = env_vars.get_cypress_record_key()
        tag_arg = ""
        test_strategy = env_vars.get_test_strategy()
        if record_key:
            record_arg = " --record "
            batch_number = os.getenv("BATCH_NUMBER")
            batch_count = os.getenv("BATCH_COUNT")
            if batch_number and batch_count:
                batch_suffix = f"-{batch_number}{batch_count}"
            else:
                batch_suffix = ""
            tag_arg = f" --tag {test_strategy}{batch_suffix}"
        else:
            record_arg = " "
    
        logger.info(f"test strategy is {test_strategy}")
        test_spec_arg = ""
        specs_str = ",".join([f"**/{f}" for f in _get_filtered_or_batched_tests()])
        test_spec_arg = f" --spec '{specs_str}' "
    
        logger.info("Running Cypress tests with command")
        node_options = "--max-old-space-size=500"
        electron_args = 'ELECTRON_EXTRA_LAUNCH_ARGS="--js-flags=\'--max-old-space-size=4096 --disable-dev-shm-usage --disable-gpu --no-sandbox"'
        command = f'{electron_args} NO_COLOR=1 NODE_OPTIONS="{node_options}" npx cypress run {record_arg} {test_spec_arg} {tag_arg}'
        logger.info(command)
        # Add --headed --spec '**/mutations/mutations.js' (change spec name)
        # in case you want to see the browser for debugging
        print_now()
        proc = subprocess.Popen(
            command,
            shell=True,
            stdout=subprocess.PIPE,
            stderr=subprocess.PIPE,
            cwd=f"{CYPRESS_TEST_DATA_DIR}",
            text=True,  # Use text mode for string output
            bufsize=1,  # Line buffered
        )
        assert proc.stdout is not None
        assert proc.stderr is not None
    
        # Function to read and print output from a pipe
        def read_and_print(pipe, prefix=""):
            for line in pipe:
                logger.info(f"{prefix}{line.rstrip()}")
    
        # Read and print output in real-time
    
        stdout_thread = threading.Thread(target=read_and_print, args=(proc.stdout,))
        stderr_thread = threading.Thread(
            target=read_and_print, args=(proc.stderr, "stderr: ")
        )
    
        # Set threads as daemon so they exit when the main thread exits
        stdout_thread.daemon = True
        stderr_thread.daemon = True
    
        # Start the threads
        stdout_thread.start()
        stderr_thread.start()
    
        # Wait for the process to complete
        return_code = proc.wait()
    
        # Wait for the threads to finish
        stdout_thread.join()
        stderr_thread.join()
    
        logger.info(f"return code: {return_code}")
        print_now()
>       assert return_code == 0
E       assert 1 == 0

tests/cypress/integration_test.py:343: AssertionError

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@codecov
Copy link

codecov bot commented Feb 17, 2026

Bundle Report

Changes will increase total bundle size by 70.25kB (0.24%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
datahub-react-web-esm 29.65MB 70.25kB (0.24%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: datahub-react-web-esm

Assets Changed:

Asset Name Size Change Total Size Change (%)
assets/index-*.js 70.0kB 19.48MB 0.36%
assets/index-*.css 255 bytes 608.85kB 0.04%

Files in assets/index-*.js:

  • ./src/alchemy-components/components/BarChart/BarChart.tsx → Total Size: 7.77kB

  • ./src/alchemy-components/components/Avatar/Avatar.tsx → Total Size: 1.56kB

  • ./src/alchemy-components/components/BarChart/constants.ts → Total Size: 1.01kB

  • ./src/alchemy-components/components/ColorPicker/ColorPicker.tsx → Total Size: 3.13kB

  • ./src/alchemy-components/components/Editor/Editor.tsx → Total Size: 3.64kB

  • ./src/CustomThemeProvider.tsx → Total Size: 786 bytes

  • ./src/alchemy-components/components/BarChart/defaults.ts → Total Size: 1.12kB

  • ./src/alchemy-components/components/DatePicker/variants/dateSwitcher/components.tsx → Total Size: 3.47kB

  • ./src/alchemy-components/components/Dropdown/DefaultDropdownContainer.tsx → Total Size: 467 bytes

  • ./src/alchemy-components/components/Carousel/Carousel.tsx → Total Size: 4.35kB

  • ./src/alchemy-components/components/Breadcrumb/components.ts → Total Size: 802 bytes

  • ./src/alchemy-components/components/AvatarStack/AvatarStackWithHover.tsx → Total Size: 1.77kB

  • ./src/alchemy-components/components/Dropdown/reset-dropdown-menu-styles.less → Total Size: 0 bytes

  • ./src/alchemy-components/components/CalendarChart/private/components/AxisLeftWeekdays.tsx → Total Size: 1.15kB

  • ./src/alchemy-components/components/Drawer/components.tsx → Total Size: 388 bytes

  • ./src/alchemy-components/components/Editor/EditorTheme.tsx → Total Size: 3.69kB

  • ./src/alchemy-components/components/AutoComplete/components.tsx → Total Size: 291 bytes

  • ./src/alchemy-components/components/ActionsBar/ActionsBar.tsx → Total Size: 592 bytes

  • ./src/alchemy-components/components/Drawer/constants.ts → Total Size: 66 bytes

  • ./src/alchemy-components/components/Button/utils.ts → Total Size: 7.6kB

  • ./src/alchemy-components/components/DatePicker/components.tsx → Total Size: 883 bytes

  • ./src/alchemy-components/components/Avatar/components.ts → Total Size: 1.1kB

  • ./src/alchemy-components/components/Avatar/utils.ts → Total Size: 2.34kB

  • ./src/alchemy-components/components/Breadcrumb/Breadcrumb.tsx → Total Size: 1.16kB

  • ./src/alchemy-components/components/Checkbox/components.ts → Total Size: 2.45kB

  • ./src/alchemy-components/components/Checkbox/utils.ts → Total Size: 978 bytes

  • ./src/alchemy-components/components/Card/components.ts → Total Size: 1.73kB

- Add global CSS overrides for reactour tooltips (background, text, links)
- Replace hardcoded alchemy gray colors in Modal title/subtitle with
  theme-aware styled components (ModalTitle, ModalSubtitle)
- Replace alchemy Heading in WelcomeToDataHubModal with themed
  SlideTitle/SlideDescription components
- Add !important to modal background overrides to beat antd specificity
- Fix props shadowing in RecipeBuilder and StructuredPropertyPrompt
- Fix useCallback missing dependency in BaseProperty
- Extract TriangleButton to fix hooks rules-of-hooks lint error

Co-authored-by: Cursor <cursoragent@cursor.com>
…ale imports

- Switch dark mode shadows from white-glow rgba to blue-tinted dark rgba
  matching the palette undertone (Polaris/Atlassian approach)
- Fix 23 lint errors: remove unused colors/theme imports, resolve theme
  variable shadowing in Input/TextArea/NestedOption, fix nested ternary
  in CustomThemeProvider, merge duplicate styled-components imports
- Replace theme.semanticTokens references with proper semantic tokens
  (buttonFillBrand, borderBrand, textError, textWarning)
- Fix SearchBarInput props shadowing bug (nested arrow fn in template)

Co-authored-by: Cursor <cursoragent@cursor.com>
Anna Everhart and others added 2 commits February 18, 2026 12:21
… dark mode bg

- Tighten shadowXs/shadowSm values for modern Linear/Vercel-style inputs
- Fix DocumentTypeProperty overflow:hidden clipping select shadow
- Standardize all page containers to use shadowSm consistently
- Remove border from HomePageContainer, replace with shadowSm
- Remove duplicate shadow from PageWrapper
- Add bg background-color to HomePageContainer for dark mode contrast
- Update EntityProfile HeaderContent/BodyContent to always use shadowSm
- Update StyledSidebar card mode to use shadowSm

Co-authored-by: Cursor <cursoragent@cursor.com>
annadoesdesign and others added 2 commits February 18, 2026 12:46
Replace removed HEALTH_INDICATOR_COLOR constant with FAILURE_COLOR_HEX
in the twoToneColor prop (Ant Design requires a hex string, not a
theme token). This was causing all Cypress tests to crash.

Co-authored-by: Cursor <cursoragent@cursor.com>
Anna Everhart and others added 2 commits February 19, 2026 10:50
…om token migration

- Fix nested props shadowing in styled-component template literals
  (PropertyTypeLabel, MarkdownViewer, TermItem x2, SecretField)
- Replace bare <label> with <span> in Form.Item label props
  (ResetCredentials, SignUp) to fix a11y lint errors
- Remove unused `shadows` import from Switch/components
- Fix Text component types: keep `theme` optional in public API,
  use internal `ThemedTextProps` for styled-component callbacks
- Narrow `Record<string, string>` theme param types to specific
  property picks for ColorTheme compatibility
- Fix `backGround` typo → `background` in GroupMembers (v1 & v2)
- Add missing `isExpanded` prop to TableCell styled component type
- Cast `color` to `ColorOptions` in Icon.tsx for getColor() compat
- Add optional chaining for `useCustomTheme()` in ViewOptionName
- Comprehensive semantic token correctness audit across ~130 files
- Remove unused constants (LINEAGE_COLORS, sharedV2/colors.ts)
- Remove `useTheme() as any` casts, migrate to direct token access
- Palette cohesion updates in color.ts for new brand colors

Co-authored-by: Cursor <cursoragent@cursor.com>
…e pill contrast

- Add `danger` prop to all destructive menu actions (delete/remove) across
  V1 and V2 components so they use themed error styling via Ant Design
- Fix close/dismiss Icon components using `color="icon"` instead of
  inheriting unintended link colors from parent elements
- Fix dark mode dropdown submenu styling (background, shadow, text color)
  by increasing CSS specificity in GlobalThemeStyles and removing hardcoded
  white background in reset-dropdown-menu-styles.less
- Update dark mode hyperlinks to brand violet instead of cyan-blue
- Add `textOnSurface{Error,Information,Success,Warning}` semantic tokens
  for high-contrast text on colored pill backgrounds without affecting
  standalone status text/icon readability
- Tune dark mode status pill surface colors to darker, more muted values
  for better contrast with their text

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs-review Label for PRs that need review from a maintainer. product PR or Issue related to the DataHub UI/UX

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments