feat: Implement dark mode for create index modal in early journey variant CLOUDP-313986

[rubydong]

Description

Update the styling of Create Index Modal components to handle dark/light theming

https://jira.mongodb.org/browse/CLOUDP-313986

Before

before.mov

After

<! --- https://github.com/user-attachments/assets/65052219-c266-47ce-be54-56da47066b09 -->

Screen.Recording.2025-06-03.at.6.29.51.PM.mov

Checklist

• New tests and/or benchmarks are included
• Documentation is changed or added
• If this change updates the UI, screenshots/videos are added and a design review is requested
• I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

• Bugfix
• New feature
• Dependency update
• Misc

Open Questions

Dependents

Types of changes

• Backport Needed
• Patch (non-breaking change which fixes an issue)
• Minor (non-breaking change which adds functionality)
• Major (fix or feature that would cause existing functionality to change)

[waltertan12]

in this case, i found it easier to default to the component's existing dark mode styles rather than apply new dark mode styling

[waltertan12]

same here

[Anemy]

Can we update the subtitle color as well as the border color for the input and covered queries areas?

For border color in darkmode we usually use palette.gray.dark2
https://github.com/mongodb-js/compass/blob/205e0d95f012defc99454d79265b1d4055f29036/packages/compass-aggregations/src/components/pipeline-toolbar/index.tsx#L31C16-L31C34

[rubydong]

Can we update the subtitle color as well as the border color for the input and covered queries areas?

For border color in darkmode we usually use palette.gray.dark2 https://github.com/mongodb-js/compass/blob/205e0d95f012defc99454d79265b1d4055f29036/packages/compass-aggregations/src/components/pipeline-toolbar/index.tsx#L31C16-L31C34

the design for border color is color.border.primary though https://www.figma.com/design/pFjIikzky8ACkISabtvhrH/CLOUDP-239367--Index-Guidance?node-id=1809-14262&t=VPtVMoJP2laSaWej-0

[Anemy]

@rubydong We might want to check with design. I'm seeing two different border colors in those designs: the Input Index uses the primary border color, palette.gray.base, and the Covered Queries section uses the secondary color palette.gray.dark2. Should they be the same?

[waltertan12]

@rubydong We probably want to check with design. I'm seeing two different border colors in those designs: the Input Index uses the primary border color, palette.gray.base, and the Covered Queries section uses the secondary color palette.gray.dark2. Should they be the same?

good eye and ty for calling this out, @Anemy! i think it was intentional by design to have two different border colors, as this is also the case for light mode. i'll verify with them though

[waltertan12]

@rubydong We probably want to check with design. I'm seeing two different border colors in those designs: the Input Index uses the primary border color, palette.gray.base, and the Covered Queries section uses the secondary color palette.gray.dark2. Should they be the same?

good eye and ty for calling this out, @Anemy! i think it was intentional by design to have two different border colors, as this is also the case for light mode. i'll verify with them though

confirmed with design that there should be distinct border colors for input vs output. made updates and attached a new screencast

[Anemy]

lgtm!