From 8c05de3aff77b73894f7abc5b709fd38d67c35cc Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 13 Mar 2025 09:42:40 +0000
Subject: [PATCH] Add Canon styles to other packages

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/app-next/package.json                                | 1 +
 packages/app-next/src/App.tsx                                 | 2 ++
 packages/app/src/App.tsx                                      | 4 +---
 .../templates/default-app/packages/app/package.json.hbs       | 1 +
 .../create-app/templates/default-app/packages/app/src/App.tsx | 2 ++
 5 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/app-next/package.json b/packages/app-next/package.json
index 2d1bdd0b70..fa13286a4e 100644
--- a/packages/app-next/package.json
+++ b/packages/app-next/package.json
@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@backstage/app-defaults": "workspace:^",
+    "@backstage/canon": "workspace:^",
     "@backstage/catalog-model": "workspace:^",
     "@backstage/cli": "workspace:^",
     "@backstage/config": "workspace:^",
diff --git a/packages/app-next/src/App.tsx b/packages/app-next/src/App.tsx
index 1992d5b35f..b2e98f2201 100644
--- a/packages/app-next/src/App.tsx
+++ b/packages/app-next/src/App.tsx
@@ -45,6 +45,8 @@ import { convertLegacyPlugin } from '@backstage/core-compat-api';
 import { convertLegacyPageExtension } from '@backstage/core-compat-api';
 import { convertLegacyEntityContentExtension } from '@backstage/plugin-catalog-react/alpha';
 
+import '@backstage/canon/css/styles.css';
+
 /*
 
 # Notes
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index d261ec6bef..95c0c4e305 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -86,9 +86,7 @@ import {
   UserNotificationSettingsCard,
 } from '@backstage/plugin-notifications';
 
-// Canon styles
-import '@backstage/canon/css/core.css';
-import '@backstage/canon/css/components.css';
+import '@backstage/canon/css/styles.css';
 
 const app = createApp({
   apis,
diff --git a/packages/create-app/templates/default-app/packages/app/package.json.hbs b/packages/create-app/templates/default-app/packages/app/package.json.hbs
index fd30cebd57..29a2059c50 100644
--- a/packages/create-app/templates/default-app/packages/app/package.json.hbs
+++ b/packages/create-app/templates/default-app/packages/app/package.json.hbs
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@backstage/app-defaults": "^{{version '@backstage/app-defaults'}}",
+    "@backstage/canon": "^{{version '@backstage/canon'}}",
     "@backstage/catalog-model": "^{{version '@backstage/catalog-model'}}",
     "@backstage/cli": "^{{version '@backstage/cli'}}",
     "@backstage/core-app-api": "^{{version '@backstage/core-app-api'}}",
diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx
index e24c4689bb..266001dea9 100644
--- a/packages/create-app/templates/default-app/packages/app/src/App.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/App.tsx
@@ -37,6 +37,8 @@ import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 
+import '@backstage/canon/css/styles.css';
+
 const app = createApp({
   apis,
   bindRoutes({ bind }) {