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
	@​types/​gapi.client.drive-v3@​0.0.5
	nx@​22.7.2
	husky@​9.1.7
	next@​16.2.6
	document.contains@​1.0.2
	@​tanstack/​react-virtual@​3.13.26
	@​emotion/​utils@​1.4.2
	eslint-config-next@​16.2.6
	@​vitest/​coverage-v8@​4.0.9
	electron-builder@​26.13.0
	@​types/​express-http-proxy@​1.6.7
	@​jetstreamapp/​simple-xml@​1.1.1
	@​types/​react-router-dom@​5.3.3
	@​types/​unzipper@​0.10.11
	@​tsconfig/​node22@​22.0.5
	jszip@​3.10.1
	webextension-polyfill@​0.12.0
	web-ext@​8.10.0
	@​types/​express@​5.0.6
	@​nx/​esbuild@​22.7.2
	@​babel/​preset-react@​7.29.7
	@​typescript-eslint/​parser@​8.46.2
	@​types/​js-yaml@​4.0.9
	@​types/​archiver@​6.0.4
	@​nx/​playwright@​22.7.2
	@​swc/​helpers@​0.5.18
	@​commitlint/​cli@​20.5.3
	@​babel/​preset-typescript@​7.29.7
	@​types/​gapi.auth2@​0.0.61
	@​oslojs/​otp@​1.1.0
	@​types/​multer@​2.1.0
	@​types/​pg@​8.20.0
See 198 more rows in the dashboard

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]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		Obfuscated code: npm @react-email/ui is 91.0% likely obfuscated Confidence: 0.91 Location: Package overview From: package.json → npm/@react-email/ui@6.4.0 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@react-email/ui@6.4.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Obfuscated code: npm js-yaml is 85.0% likely obfuscated Confidence: 0.85 Location: Package overview From: package.json → npm/js-yaml@4.2.0 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/js-yaml@4.2.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

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.