From a8d1bd5b0204b405b03d512c02172688b165d838 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 3 Jan 2025 17:22:48 +0100
Subject: [PATCH] Add content to the about page

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 microsite-canon/app/globals.css               |  3 +-
 .../components/Chip/styles.module.css         | 10 ++++++
 .../components/Table/styles.module.css        |  1 -
 microsite-canon/content/about.mdx             | 33 +++++++++++++++++--
 4 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/microsite-canon/app/globals.css b/microsite-canon/app/globals.css
index 797a7d73cd..de791f589a 100644
--- a/microsite-canon/app/globals.css
+++ b/microsite-canon/app/globals.css
@@ -17,11 +17,10 @@ iframe {
 
 .shiki,
 .shiki span {
-  background-color: var(--canon-surface-1) !important;
+  background-color: transparent !important;
   font-family: var(--canon-font-monospace);
   font-size: 0.875rem;
   line-height: 1.7;
-  transition: background-color 0.2s ease-in-out;
 }
 
 [data-theme='dark'] .shiki,
diff --git a/microsite-canon/components/Chip/styles.module.css b/microsite-canon/components/Chip/styles.module.css
index 6955f9b0e8..44337afb0a 100644
--- a/microsite-canon/components/Chip/styles.module.css
+++ b/microsite-canon/components/Chip/styles.module.css
@@ -25,9 +25,19 @@
   margin-right: 4px;
   background-color: #f0f0f0;
   color: #5d5d5d;
+  transition: background-color 0.2s ease-in-out;
 }
 
 .head {
   background-color: #eaf2fd;
   color: #2563eb;
 }
+
+[data-theme='dark'] .chip {
+  background-color: #2c2c2c;
+  color: #fff;
+}
+
+[data-theme='dark'] .chip.head {
+  background-color: #26417b;
+}
diff --git a/microsite-canon/components/Table/styles.module.css b/microsite-canon/components/Table/styles.module.css
index c2244f3014..df90566eee 100644
--- a/microsite-canon/components/Table/styles.module.css
+++ b/microsite-canon/components/Table/styles.module.css
@@ -43,7 +43,6 @@
 }
 
 .tableHeaderCell {
-  /* background-color: #f5f5f5 !important; */
   border-bottom: 1px solid var(--canon-border-base) !important;
   font-weight: 500;
   font-size: 14px;
diff --git a/microsite-canon/content/about.mdx b/microsite-canon/content/about.mdx
index 7755ec027c..a4c16ee79e 100644
--- a/microsite-canon/content/about.mdx
+++ b/microsite-canon/content/about.mdx
@@ -1,3 +1,32 @@
-# About
+# About Canon
 
-This is the about page.
+Canon is a design system created specifically for Backstage, built with React, TypeScript, and vanilla CSS.
+This open-source library is hosted in the Backstage monorepo. While it can be used in other projects, Canon
+is designed to deliver a consistent, accessible, and extensible experience tailored to Backstage users.
+
+## Philosophy
+
+Backstage empowers product teams to build software faster and with greater quality. Its extensibility,
+however, required us to rethink how to deliver a consistent and accessible user experience. Our goal is
+to enable plugin creators to design plugins that seamlessly integrate with Backstage&apos;s look and feel while
+still allowing customization to match individual brands.
+
+Instead of reinventing the wheel, we chose to focus on layout and styling while leveraging existing headless
+component libraries for functionality. This approach allows us to dedicate our efforts to creating a cohesive
+and flexible theming system.
+
+## Team
+
+Canon is designed and maintained primarily by Spotify&apos;s Backstage team, leveraging Spotify&apos;s expertise in
+crafting high-quality design and technology. Drawing from our experience in building reliable and intuitive
+user experiences for the music industry, we&apos;ve created a design system that looks great and works seamlessly.
+
+## Community
+
+Canon is an open-source project and we welcome contributions from the community. If you are interested in
+contributing to Canon, please read our [contributing guide](https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md)
+and our [code of conduct](https://github.com/backstage/backstage/blob/master/CODE_OF_CONDUCT.md).
+
+## License
+
+Canon is licensed under the Apache 2.0 license. See the [LICENSE](https://github.com/backstage/backstage/blob/master/LICENSE) file for more details.