Implement SLDS 2 Cosmos theme with dark mode support

[paustint]

Introduce the SLDS 2 Cosmos theme with support for dark mode. Update styles and configurations to align with the new theme, ensuring a cohesive user experience across the application. Adjustments include changes to color schemes and the integration of new design tokens.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​salesforce-ux/​design-system-2@​2.0.0

View full report

[Copilot]

Pull request overview

Adopts SLDS 2 (Cosmos) as the design system across all Jetstream apps, adds a Light/Dark/Match-Device color-scheme preference (per-user via Jotai/localforage in the main app/desktop/canvas, and via chrome.storage in the browser extension), and replaces app-level main.scss files plus inline SCSS token references with a shared CSS library (@jetstream/ui-styles/main.css) that uses native CSS nesting and --slds-g-* design tokens.

Changes:

• Swap SLDS 1 CSS for @salesforce-ux/design-system-2/dist/css/bundled/slds2.cosmos.css in every app entry, remove sass/sass-loader, and consolidate styles into libs/shared/ui-styles/src/main.css; data-table styles ported to native CSS and re-themed against SLDS 2 tokens / slds-color-scheme--* body classes.
• Introduce ColorScheme type, ThemeApplier/ExtensionThemeApplier to toggle slds-color-scheme--{light,dark,system} on body (or scoped container), add Theme menu items in HeaderNavbar and a Theme select in the extension popup, plus a MonacoEditor/MonacoDiffEditor wrapper that derives Monaco theme from the same preference.
• Replace hard-coded surface/border/text colors throughout components with var(--slds-g-color-*) tokens, add slds-icon_container class and icon-name attribute for SLDS 2 icon theming, and make QueryHistory embedded to share a parent button group.

Reviewed changes

Copilot reviewed 87 out of 89 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
package.json, pnpm-lock.yaml, tsconfig.base.json	Add design-system-2 dep, drop sass/sass-loader, map @jetstream/ui-styles/main.css.
libs/shared/ui-styles/*	New shared CSS library replacing per-app SCSS.
libs/shared/ui-core/src/app/ThemeApplier.tsx, MonacoEditor.tsx, HeaderNavbar.tsx, index.ts	Theme application, Monaco theme wrapper, theme menu items.
libs/shared/ui-core/src/{record,query,orgs,mass-update-records,AppHome}/*	Switch to MonacoEditor wrapper, use SLDS card class, token-based colors, icon container additions.
libs/shared/ui-app-state/src/lib/ui-app-state.ts	Default new local preferences colorScheme: 'light'.
libs/types/src/lib/types.ts	Add ColorScheme type and field on UserProfilePreferences.
libs/ui/src/lib/{data-table,popover,form/context-menu,widgets,layout}/*	RDG theming via body scheme classes, popover/menu/icon updates, token-based colors.
libs/features/{query,salesforce-api,manage-permissions,load-records,formula-evaluator,deploy,debug-log-viewer,create-object-and-fields,anon-apex}/*	Replace @monaco-editor/react direct usage with MonacoEditor, swap hard-coded colors for tokens, minor button/badge tweaks.
libs/icon-factory/src/lib/icon-factory.tsx + new icons	Register ColorSwatch, DesktopAndPhone, LightBulb utility icons for theme menu.
apps/jetstream{,-desktop-client,-canvas}/*	Adopt SLDS 2 CSS, mount ThemeApplier, initial slds-color-scheme--light body class, drop per-app main.scss.
apps/jetstream-web-extension/*	Extension colorScheme storage, ExtensionThemeApplier, popup theme select, content-script scoped theming + PortalProvider, inverse logo.
apps/landing/*	Convert index.scss → index.css and SCSS comments → CSS comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[socket-security]

All alerts resolved. Learn more about Socket for GitHub.

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report

[Copilot]

Pull request overview

Copilot reviewed 99 out of 101 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

libs/shared/ui-styles/src/main.css:100

• Both .bg-color-gray-light and .bg-color-gray-dark reference the same CSS variable (--slds-g-color-neutral-base-95), only differing in the fallback. As soon as the SLDS 2 token is defined (the normal case when the stylesheet is loaded), the two classes resolve to the same color and the visual distinction between "gray-light" and "gray-dark" that existed in the previous SCSS ($color-gray-3 vs $color-background-dark) is lost. .bg-color-gray-dark should map to a darker neutral token (e.g. --slds-g-color-neutral-base-80 or similar) so the two utility classes stay visually distinct in both light and dark schemes.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.