UUI: Upgrade to 2.0.0 on v17 and consume the Login project by source

src/Umbraco.Cms.StaticAssets/CLAUDE.md

@@ -130,6 +130,10 @@ LoginAssetsPath = wwwroot/umbraco/login
 | `BuildBackoffice` | Runs `npm run build:for:cms` |
 | `DefineBackofficeAssets` | Registers assets with StaticWebAssets system |
 | `CleanBackoffice` | Removes built assets on `dotnet clean` |
+| `RestoreLogin` | Runs `npm i` if Login's package-lock changed |
+| `BuildLogin` | Runs `npm run build` in Login. Depends on `RestoreBackoffice` because Login's `tsc` walks Client's `src/` via tsconfig path aliases and needs Client's `node_modules` populated for transitive `lit`/`rxjs`/UUI resolution |
+| `DefineLoginAssets` | Registers Login assets with StaticWebAssets system |
+| `CleanLogin` | Removes built Login assets on `dotnet clean` |
 
 ### Build Conditions
 
@@ -209,12 +213,14 @@ Full Monaco code editor included at `wwwroot/umbraco/backoffice/monaco-editor/`
 
 CSS themes in `wwwroot/umbraco/backoffice/css/`:
 - `umb-css.css` - Main styles
-- `uui-css.css` - UI library styles
-- `dark.theme.css` - Dark theme
-- `high-contrast.theme.css` - Accessibility theme
+- `light.css` - Default UUI theme (replaces the former `uui-css.css`)
+- `dark.css` - Dark theme (shipped by `@umbraco-ui/uui`)
+- `high-contrast.css` - Accessibility theme (shipped by `@umbraco-ui/uui`)
 - `umbraco-blockgridlayout.css` - Block grid styles
 - `rte-content.css` - Rich text editor content styles
 
+The UUI theme files (`light.css`, `dark.css`, `high-contrast.css`) are copied from `@umbraco-ui/uui` during the backoffice build; see `Umbraco.Web.UI.Client/src/packages/core/themes/manifests.ts`.
+
 ---
 
 ## Quick Reference

src/Umbraco.Cms.StaticAssets/Umbraco.Cms.StaticAssets.csproj

@@ -113,7 +113,7 @@
     <Exec Command="npm i --no-fund --no-audit" WorkingDirectory="$(LoginProjectDirectory)" />
   </Target>
 
-  <Target Name="BuildLogin" DependsOnTargets="RestoreLogin">
+  <Target Name="BuildLogin" DependsOnTargets="RestoreLogin;RestoreBackoffice">
     <Message Importance="high" Text="Executing Login NPM build script..." />
     <Exec Command="npm run build" WorkingDirectory="$(LoginProjectDirectory)" />
     <ItemGroup>

src/Umbraco.Cms.StaticAssets/umbraco/UmbracoBackOffice/Index.cshtml

@@ -34,7 +34,7 @@
     <title>Umbraco</title>
 
     <link rel="stylesheet" href="@backOfficeAssetsPath/css/umb-css.css" />
-    <link rel="stylesheet" href="@backOfficeAssetsPath/css/uui-css.css" />
+    <link rel="stylesheet" href="@backOfficeAssetsPath/css/light.css" />
     @await Html.BackOfficeImportMapScriptAsync(JsonSerializer, BackOfficePathGenerator, PackageManifestService, CspNonceService)
     <script type="module" src="@backOfficeAssetsPath/apps/app/app.element.js" asp-csp-nonce></script>
 </head>

src/Umbraco.Cms.StaticAssets/umbraco/UmbracoLogin/Index.cshtml

@@ -46,7 +46,7 @@
     <meta name="pinterest" content="nopin"/>
     <title>Umbraco</title>
 
-    <link rel="stylesheet" href="~/umbraco/backoffice/css/uui-css.css" asp-append-version="true" />
+    <link rel="stylesheet" href="~/umbraco/backoffice/css/light.css" asp-append-version="true" />
     <style>
       body {
         margin: 0;

src/Umbraco.Web.UI.Client/.nvmrc

@@ -1 +1 @@
-22
+24

src/Umbraco.Web.UI.Client/.storybook/preview.js

@@ -1,4 +1,6 @@
-import '@umbraco-ui/uui-css/dist/uui-css.css';
+import lightCss from '@umbraco-ui/uui/themes/light.css?inline';
+import darkCss from '@umbraco-ui/uui/themes/dark.css?inline';
+import highContrastCss from '@umbraco-ui/uui/themes/high-contrast.css?inline';
 import '../src/css/umb-css.css';
 
 import 'element-internals-polyfill';
@@ -70,6 +72,39 @@ import { UMB_APP_LANGUAGE_CONTEXT } from '../src/packages/language/constants';
 // MSW
 startMockServiceWorker({ serviceWorker: { url: (import.meta.env.VITE_BASE_PATH ?? '/') + 'mockServiceWorker.js' } });
 
+const themes = {
+	light: lightCss,
+	dark: darkCss,
+	'high-contrast': highContrastCss,
+};
+
+let themeStyleEl = null;
+
+export const globalTypes = {
+	theme: {
+		name: 'Theme',
+		defaultValue: 'light',
+		toolbar: {
+			icon: 'paintbrush',
+			items: [
+				{ value: 'light', title: 'Light' },
+				{ value: 'dark', title: 'Dark' },
+				{ value: 'high-contrast', title: 'High Contrast' },
+			],
+			dynamicTitle: true,
+		},
+	},
+};
+
+function applyTheme(theme) {
+	if (!themeStyleEl) {
+		themeStyleEl = document.createElement('style');
+		themeStyleEl.id = 'uui-theme';
+		document.head.appendChild(themeStyleEl);
+	}
+	themeStyleEl.textContent = themes[theme] ?? lightCss;
+}
+
 class UmbStoryBookAuthContext extends UmbContextBase {
 	#isAuthorized = new UmbBooleanState(true);
 	isAuthorized = this.#isAuthorized.asObservable();
@@ -162,10 +197,14 @@ class UmbStoryBookElement extends UmbLitElement {
 
 customElements.define('umb-storybook', UmbStoryBookElement);
 
+const themeProvider = (story, context) => {
+	applyTheme(context.globals['theme'] ?? 'light');
+	return story();
+};
 const storybookProvider = (story) => html` <umb-storybook>${story()}</umb-storybook> `;
 
 // Provide the MSW addon decorator globally
-export const decorators = [storybookProvider];
+export const decorators = [themeProvider, storybookProvider];
 
 export const parameters = {
 	docs: {

src/Umbraco.Web.UI.Client/CLAUDE.md

@@ -156,7 +156,7 @@ Why: Normalizes to conventional semver format
 	"peerDependencies": {
 		"lit": "^3.3.1",
 		"rxjs": "^7.8.2",
-		"@umbraco-ui/uui": "^1.18.1",
+		"@umbraco-ui/uui": "^2.0.0",
 		"monaco-editor": "^0.55.1",
 		"@tiptap/core": "^3.16.0",
 		"@hey-api/openapi-ts": ">=0.85.0 <1.0.0"

src/Umbraco.Web.UI.Client/devops/build/copy-to-cms.js

@@ -9,7 +9,10 @@ console.log('--- Copying assets ---');
 cpSync('./src/assets', `${srcDir}/assets`, { recursive: true });
 console.log('--- Copying assets done ---');
 
-// Copy SRC CSS
+// Copy Umbraco-specific CSS (umb-css.css, etc.) into dist-cms/css/.
+// Note: UUI theme CSS (dark.css, high-contrast.css) is already in dist-cms/css/
+// at this point, copied there by src/external/uui/vite.config.ts during the workspace build.
+// Theme manifests referencing these files live in src/packages/core/themes/manifests.ts.
 console.log('--- Copying src CSS ---');
 cpSync('./src/css', `${srcDir}/css`, { recursive: true });
 console.log('--- Copying src CSS done ---');

src/Umbraco.Web.UI.Client/devops/icon-manager/icon-manager.html

@@ -4,7 +4,7 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Icon Dictionary Manager</title>
-		<link rel="stylesheet" href="/umbraco/backoffice/css/uui-css.css" />
+		<link rel="stylesheet" href="/umbraco/backoffice/css/light.css" />
 		<script type="module" src="./icon-manager-app.element.ts"></script>
 		<style>
 			body {

src/Umbraco.Web.UI.Client/index.html

@@ -7,7 +7,7 @@
 		<title>Umbraco</title>
 		<link rel="icon" type="image/svg+xml" href="./umbraco/backoffice/assets/favicon.svg" />
 		<link rel="stylesheet" href="src/css/umb-css.css" />
-		<link rel="stylesheet" href="./umbraco/backoffice/css/uui-css.css" />
+		<link rel="stylesheet" href="./umbraco/backoffice/css/light.css" />
 		<script src="./umbraco/backoffice/msw/index.js"></script>
 		<script type="module" src="index.ts"></script>
 	</head>